{% extends "base.html" %}

{% block title %}Welcome to iCoach{% endblock %}

{% block content %}
    <div class="col1">
	    <div class="box_top"></div>                	
        <div class="box_middle">
		    <h3>What is iCoach?</h3>
		    <img alt="divider" src="media/img/hr.png" />
		    <p><span style="color: #014586;">iCoach</span>
			    is a service that promotes healthy behavioral habits by sending
			    personalized text messages throughout the day to your mobile phone.
			    For example,the messages may recommend exercise depending on the
			    current weather conditions. It's simple to get started!</p>
        </div>
        <div class="box_bottom"></div>  
        
        <div class="box2_top"><h3>Get Started Now!</h3></div>
        <div class="box2_middle">                                           
            <div style="padding-bottom: 5px;">
                <img  style="float: left; clear: both; margin-right: 5px;" alt="picture3" src="media/img/pic_3.jpg"/>
                <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Pellentesque viverra dictum odio eu pellentesque. Ut eget erat
                mauris, at porta augue. Nullam risus libero, porttitor at egestas
                vel, ultricies in nunc. Nunc id metus nibh, vitae mollis dolor.</span></div>
                <img name="button1" alt="button1" src="media/img/btn1.png" style="padding-left: 150px;"/>	                  			
	    </div>
        <div class="box2_bottom"></div>                                  	               
    </div>
    
    <div class="col2">
        <div class="box_top"></div>
        <div class="box_middle">
    	    <h3>Here's what iCoach has to offer you:</h3>                   
            <img alt="divider" src="media/img/hr.png" />				
		    <ul>
			    <li><span class="number">01.</span><a href="">Lorem ipsum dolar sit amet, consectetur</a> adipiscing
				    elit, Pellentesque viverra dictum odio eu peilentesque</li>
			    <li><span class="number">02.</span><a href="">Lorem ipsum dolar sit amet, consectetur</a> adipiscing
				    elit, Pellentesque viverra dictum odio eu peilentesque</li>	
			    <li><span class="number">03.</span><a href="">Lorem ipsum dolar sit amet, consectetur</a></li>																													
		    </ul>
	    </div>
        <div class="box_bottom"></div>
        
        <div class="box2_top">
            <h3>Featured Article</h3>
        </div>
        <div class="box2_middle">
            <div style="float: left; clear: both;">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Pellentesque viverra dictum odio eu pellentesque. Ut eget erat
                mauris, at porta augue. Nullam risus libero, porttitor at egestas
                vel, ultricies in nunc. Nunc id metus nibh, vitae mollis dolor.</p></div>
               <img alt="button1" src="media/img/btn2.png" style="padding-left: 150px;"/>
	    </div>
        <div class="box2_bottom"></div>                    
    </div>   
    
    <div class="col3">
        <h3 style="color: #014586; padding-bottom: 20px;">More Details on iCoach</h3>
        <img alt="picture1" src="media/img/pic_1.jpg" />
        <p><a href="">Maecenas eget magna leo, et</a> aliquet metus. Donec in eros purus.
           Phasellus nunc nunc, dapibus ac lobortis non, mollis eu nulla.</p>
        <img alt="picture2" src="media/img/pic_2.jpg" />
        <p><a href="">Maecenas eget magna leo, et</a> aliquet metus. Donec in eros purus.
           Phasellus nunc nunc, dapibus ac lobortis non, mollis eu nulla.</p>
    </div>                  
{% endblock %}
